<template>
  <div>
    <div v-if="currentData">
      <h2>{{ currentData.title }}</h2>
      <p>{{ currentData.content }}</p>
    </div>
    <button @click="goToNext">下一条</button>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'DetailPage',
  computed: {
    ...mapGetters(['allData']),
    currentId() {
      return this.$route.params.id
    },
    currentData() {
      return this.allData.find((item) => item.id === this.currentId)
    },
  },
  methods: {
    getNextId(currentId) {
      const allData = this.allData
      const currentIndex = allData.findIndex((item) => item.id === currentId)

      if (currentIndex >= 0 && currentIndex < allData.length - 1) {
        return allData[currentIndex + 1].id
      } else {
        return null // 或者 return allData[0].id;
      }
    },
    goToNext() {
      const nextId = this.getNextId(this.currentId)
      if (nextId) {
        this.$router.push({ name: 'DetailPage', params: { id: nextId } })
      } else {
        alert('已经是最后一条数据！')
      }
    },
  },
}
</script>
